<template>
  <div class="settlement-details">
    <el-dialog
      title="代理人评分详情"
      center
      :visible.sync="isShow"
      width="82%"
      :close-on-click-modal="false"
      @close="closeDialog"
    >

      <el-table
        :data="tableData"
        border
        @sort-change="tableSortChange"
        v-loading="loading">
        <el-table-column property="order_number" show-overflow-tooltip label="订单编号" min-width="200" align="left" sortable="custom"></el-table-column>
        <el-table-column property="quelity" show-overflow-tooltip label="态度分" min-width="100" align="center" sortable="custom"></el-table-column>
        <el-table-column property="attitude" show-overflow-tooltip label="质量分" min-width="100" align="center" sortable="custom"></el-table-column>
        <el-table-column property="take_time" show-overflow-tooltip label="耗时分" min-width="100" align="center" sortable="custom"></el-table-column>
        <el-table-column property="total_score" show-overflow-tooltip label="总分" min-width="100" align="center" sortable="custom"></el-table-column>
        <el-table-column property="remark" show-overflow-tooltip label="用户评论" min-width="200" align="left" sortable="custom"></el-table-column>
        <el-table-column property="created_at" show-overflow-tooltip label="评分时间" min-width="180" align="center" sortable="custom"></el-table-column>
      </el-table>

    </el-dialog>
  </div>
</template>

<script>

export default {
  components: {

  },
  data() {
    return {
      tableData: [],
      isShow: false,
      loading: false,
      agentId: null,
      sort_params: {}
    };
  },
  methods: {
    async show(data) {
      this.isShow = true;
      this.agentId = data.id;
      await this.getData();
    },
    getData(args) {
      let params = {
        agent_id: this.agentId
      }
      if (args) {
        params= {...params, ...args}
      }
      this.loading = true
      this.$axios
        .get("/api/grades/list", {params:params})
        .then(res => {
          if (res.data.code == 200) {
            if (res.data.data.length == 0) {
              this.loading = false
              this.$message({
                type: "error",
                message: "该代理人暂无评分明细"
              })
              return
            }
            this.tableData = res.data.data;
            this.loading = false
          } else {
            this.loading = false
            this.$message({
              type: "error",
              message: res.data.message
            });
          }
        });
    },


    closeDialog() {
      this.tableData = [];
      // this.isShow = false;
    },

    tableSortChange(column) {
      let params= {
        sort_str: column.prop
      };
      if (column.order == "ascending") {
        params.sort_order = "asc";
      } else if (column.order == "descending") {
        params.sort_order = "desc";
      } else {
        params = {};
      }
      this.getData(params);
    }
  }
};
</script>

<style lang='less' type='text/css'>
.settlement-details {

}
</style>
